<template>
  <div
    ref="dom"
    class="charts chart-radar"
    style="height: 190px; margin-top: 3%"
  ></div>
</template>

<script>
// import echarts from "echarts";
import * as echarts from 'echarts'
import tdTheme from "./theme.json";
// import { on, off } from '@/libs/tools';
// echarts.registerTheme('tdTheme', tdTheme);
export default {
  name: "ChartRadar",
  props: {
    value: Object,
    text: String,
    subtext: String,
    clickTag: String,
    xAxisData: Array,
    seriesData: Array,
    grid: Object,
    tooltip: Object,
    max: Array,
    radius: Number,
    num: Number,
    shape: String,
    color: String,
    indicatorMax: Array,
    legendData: Array,
  },
  data() {
    return {
      dom: null,
    };
  },
  watch: {
    value: {
      deep: true,
      handler(val) {
        this.initChart();
      },
    },
    text: {
      deep: true,
      handler(val) {
        this.initChart();
      },
    },
    series: {
      deep: true,
      handler(val) {
        this.initChart();
      },
    },
    max: {
      deep: true,
      handler(val) {
        this.initChart();
      },
    },
  },
  methods: {
    resize() {
      this.dom.resize();
    },
    initChart() {
      let that = this;
      this.$nextTick(() => {
        let yData = that.value.yData;
        // let legendData = that.value.legendData
        let legendData = []; // 下面这段是为了让编辑框可以进行修改的
        let max = that.max;
        for (let i in yData) {
          legendData.push(yData[i].name); // 最大值上面的名字和lengend要一致
          max[i].name = yData[i].name;
        }
        let option = {
          title: {
            text: that.text,
            top: "top",
            left: "center",
            textStyle: {
              color: "#333",
              fontStyle: "normal",
              fontWeight: "bold",
              fontSize: 24,
            },
          },
          tooltip: {},
          toolbox: {
            show: true,
            orient: "vertical",
            y: "center",
            right: "20px",
            feature: {
              make: { show: true },
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ["line", "bar"] },
              restore: { show: true },
              saveAsImage: { show: true },
            },
          },
          legend: {
            data: legendData,
            y: "bottom",
            x: "center",
          },
          radar: {
            radius: "50%",
            name: {
              textStyle: {
                color: "#999",
              },
            },
            indicator: max,
          },
          series: {
            type: "radar",
            data: yData,
          },
        };
        this.dom = echarts.init(this.$refs.dom);
        this.dom.setOption(option);
        // on(window, "resize", this.resize);
      });
    },
  },
  mounted() {
    this.initChart();
  },
  // beforeDestroy() {
  //   off(window, "resize", this.resize);
  // },
};
</script>
